<template>
	<view :style="colorStyle">
		<form @submit="formSubmit">
			<view class='addAddress'>
				<view class='list'>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>姓名</view>
						<input type='text' placeholder='请输入姓名' :disabled='isDisabled' name='name'
							:value="userAddress.name" placeholder-class='placeholder'></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>联系电话</view>
						<input type='number' placeholder='请输入联系电话' :disabled='isDisabled' name="phone"
							:value='userAddress.phone' placeholder-class='placeholder' pattern="\d*"></input>
					</view>
					<!-- <view class='item acea-row row-between-wrapper'>
						<view class='name'>uid</view>
						<input type='text' disabled="true" :disabled='isDisabled'  placeholder='请输入姓名' name='uid' v-model="userAddress.uid"
							placeholder-class='placeholder'></input>
					</view> -->
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>身份证号</view>
						<input type='number' placeholder='请输入身份证号' name="cart_no" :value='userAddress.cart_no'
							placeholder-class='placeholder' pattern="\d*"></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>公司名称</view>
						<input type='text' placeholder='请输入公司名称' :disabled='isDisabled' name="corporate_name"
							:value='userAddress.corporate_name' placeholder-class='placeholder' pattern="\d*"></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>公司电话</view>
						<input type='number' placeholder='请输入公司电话' :disabled='isDisabled' name="corporate_phone"
							:value='userAddress.corporate_phone' placeholder-class='placeholder' pattern="\d*"></input>
					</view>
					<view class='item acea-row '>
						<view class='name'>公司照片</view>
						<view class="upload">
							<view class='pictrue' v-for="(item,index) in images" :key="index" :data-index="index">
								<image :src='item'></image>
								<text class='iconfont icon-guanbi1' @click.stop='DelPic(index,1)'></text>
							</view>
							<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic(1)'>
								<text class='iconfont icon-icon25201'></text>
								<view>上传图片</view>
							</view>
						</view>
					</view>
					<view class='item acea-row '>
						<view class='name'>运营资格证</view>
						<view class="upload">
							<view class='pictrue' v-for="(item,index) in business_img" :key="index" :data-index="index">
								<image :src='item'></image>
								<text class='iconfont icon-guanbi1' @click.stop='DelPic(index,2)'></text>
							</view>
							<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic(2)'>
								<text class='iconfont icon-icon25201'></text>
								<view>上传图片</view>
							</view>
						</view>
					</view>

					<!-- <view class='item acea-row row-between-wrapper'>
						<view class='name'>所在地区</view>
						<view class="address">
							<picker mode="multiSelector" @change="bindRegionChange"
								@columnchange="bindMultiPickerColumnChange" :value="valueRegion" :range="multiArray">
								<view class='acea-row'>
									<view class="picker">{{region[0]}}，{{region[1]}}，{{region[2]}}</view>
									<view class='iconfont icon-dizhi fontcolor'></view>
								</view>
							</picker>
						</view>
					</view> -->
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>公司地址</view>
						<input type='text' placeholder='请填写公司地址' :disabled='isDisabled' name='detail'
							placeholder-class='placeholder' :value='userAddress.corporate_address'></input>
					</view>
					<view class='item acea-row row-between-wrapper' v-if="ShenheMain&&userAddress.status_name">
						<view class='name'>审核状态</view>
						<input type='text' placeholder='' disabled='true' name='detail' placeholder-class='placeholder'
							:value='userAddress.status_name'></input>
					</view>
					<view class='item acea-row row-between-wrapper ' v-if="ShenheMain&&userAddress.remarks">
						<view class='name'>审核备注</view>
						<input type='text' placeholder='' disabled='true' name='detail' placeholder-class='placeholder'
							:value='userAddress.remarks'></input>
					</view>
					<view class='item acea-row row-between-wrapper' v-if="ShenheMain&&userAddress.supplierLevel">
						<view class='name'>审核级别</view>
						<input type='text' placeholder='' disabled='true' name='detail' placeholder-class='placeholder'
							:value='userAddress.supplierLevel.name'></input>
					</view>
				</view>

				<button v-if="!ShenheMain" class='keepBnt bg-color' form-type="submit">立即保存</button>
				<!-- #ifdef MP -->
				<view class="wechatAddress" v-if="!id" @click="getWxAddress">导入微信地址</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<!-- <view class="wechatAddress" v-if="this.$wechat.isWeixin() && !id" @click="getAddress">导入微信地址</view> -->
				<!-- #endif -->
			</view>
		</form>
		<!-- #ifdef MP -->
		<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
		<!-- #endif -->
		<!-- #ifndef MP -->
		<!-- <home></home> -->
		<!-- #endif -->

	</view>
</template>

<script>
	import {
		editAddress,
		getAddressDetail,
		getUserInfo

	} from '@/api/user.js';
	import {
		getCity
	} from '@/api/api.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import {
		submitForm,
		getagentCheck,
		getAgentInfo
	} from '@/api/store.js'
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import easyUpload from '@/components/easy-upload/easy-upload.vue'
	import home from '@/components/home';
	import colors from '@/mixins/color.js';
	export default {
		components: {
			// #ifdef MP
			authorize,
			// #endif
			home,
			easyUpload
		},
		mixins: [colors],
		data() {
			return {
				regionDval: ['浙江省', '杭州市', '滨江区'],
				cartId: '', //购物车id
				pinkId: 0, //拼团id
				couponId: 0, //优惠券id
				id: 0, //地址id
				userAddress: {
					is_default: false,
					uid: ""
				}, //地址详情
				region: ['省', '市', '区'],
				valueRegion: [0, 0, 0],
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				district: [],
				multiArray: [],
				multiIndex: [0, 0, 0],
				cityId: 0,
				defaultRegion: ['广东省', '广州市', '番禺区'],
				defaultRegionCode: '110101',
				news: '',
				noCoupon: 0,
				images: [],
				business_img: [],
				isDisabled: false,
				ShenheMain: false
			};
		},
		computed: mapGetters(['isLogin']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						this.getUserAddress();
					}
				},
				deep: true
			}
		},
		onLoad(options) {
			if (options.type == 'Look') {
				this.isDisabled = true
				this.getMain(options.id)
			}
			if (this.isLogin) {
				this.getUserInfo()

			} else {
				toLogin();
			}
		},
		methods: {
			getMain(id) {
				getAgentInfo(id).then(res => {
					console.log(res)
					this.userAddress = res.data
					this.ShenheMain = true
				})
			},
			getUserInfo() {
				getUserInfo().then(res => {
					console.log(res)
					this.userAddress.uid = res.data.uid
				})
				getagentCheck().then(res => {
					console.log(res)

					if (res.data.status == '1') {
						uni.showToast({
							title:'审核中',
							icon:'loading'
						})
						this.isDisabled = true
						this.ShenheMain = true
						this.userAddress = res.data.data
						if (this.userAddress.business_img.indexOf(',') !== -1) {
							this.business_img = this.userAddress.business_img.split(',')
						
						} else {
							this.business_img[0] = this.userAddress.business_img
						}
						if (this.userAddress.corporate_img.indexOf(',') !== -1) {
							this.images = this.userAddress.corporate_img.split(',')
						
						} else {
							this.images[0] = this.userAddress.corporate_img
						}
						console.log(this.images, this.business_img)
						this.$set(this, 'userAddress', this.userAddress)
					}

					if (res.data.status == '2') {
						this.isDisabled = true
						this.ShenheMain = true
						uni.showToast({
							title:'审核通过',
							icon:'loading'
						})
						this.userAddress = res.data.data
						if (this.userAddress.business_img.indexOf(',') !== -1) {
							this.business_img = this.userAddress.business_img.split(',')

						} else {
							this.business_img[0] = this.userAddress.business_img
						}
						if (this.userAddress.corporate_img.indexOf(',') !== -1) {
							this.images = this.userAddress.corporate_img.split(',')

						} else {
							this.images[0] = this.userAddress.corporate_img
						}
						console.log(this.images, this.business_img)
						this.$set(this, 'userAddress', this.userAddress)
						this.$set(this, 'images', this.images)
						this.$set(this, 'business_img', this.business_img)

					}
					if (res.data.status == '3') {
						this.userAddress = res.data.data
						uni.showToast({
							title: "审核被拒绝,请重新填写提交",
						})
					}

				})
			},
			// #ifdef APP-PLUS
			// 获取选择的地区
			handleGetRegion(region) {
				this.region = region
			},
			// #endif
			// 回去地址数据


			// 授权回调
			onLoadFun: function() {
				this.getUserAddress();
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			uploadpic: function(type) {
				if (this.isDisabled) {
					return
				}
				let that = this;
				that.$util.uploadImageOne('upload/image', (res) => {

					if (type == 1) {
						this.images.push(res.data.url);
						that.$set(that, 'images', that.images);

					} else {
						this.business_img.push(res.data.url);
						that.$set(that, 'business_img', that.business_img);

					}

				});

			},
			/**
			 * 删除图片
			 * 
			 */
			DelPic: function(index, type) {
				if (this.isDisabled) {
					return
				}
				let that = this
				if (type == 1) {
					that.images.splice(index, 1);
					that.$set(that, 'images', that.images);
				} else {
					that.business_img.splice(index, 1);
					that.$set(that, 'business_img', that.business_img);
				}



			},



			formSubmit: function(e) {
				let that = this,
					value = e.detail.value;
				console.log(value)
				if (!value.name.trim()) return that.$util.Tips({
					title: '请填写姓名'
				});
				if (!value.phone) return that.$util.Tips({
					title: '请填写联系电话'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(value.phone)) return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
				// if (that.region[0] == '省') return that.$util.Tips({
				// 	title: '请选择所在地区'
				// });
				// if (!value.detail.trim()) return that.$util.Tips({
				// 	title: '请填写详细地址'
				// });

				value.corporate_img = this.images.join(',')
				value.business_img = this.business_img.join(',')
				uni.showLoading({
					title: '保存中',
					mask: true
				})
				submitForm(value).then(res => {
					console.log(res)
					uni.hideLoading()
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}).catch(err => {
					uni.hideLoading()
					that.$util.Tips({
						title: err
					});
				})

			},
			ChangeIsDefault: function(e) {
				this.$set(this.userAddress, 'is_default', !this.userAddress.is_default);
			}
		}
	}
</script>

<style scoped lang="scss">
	.fontcolor {
		color: var(--view-theme);
	}

	.addAddress .list {
		background-color: #fff;
	}

	.addAddress .list .item {
		padding: 30rpx;
		border-top: 1rpx solid #eee;
	}

	.addAddress .list .item .name {
		width: 195rpx;
		font-size: 30rpx;
		color: #333;
	}

	.addAddress .list .item .address {
		// width: 412rpx;
		flex: 1;
		margin-left: 20rpx;
	}

	.addAddress .list .item input {
		width: 475rpx;
		font-size: 30rpx;
	}

	.addAddress .list .item .placeholder {
		color: #ccc;
	}

	.addAddress .list .item picker {
		width: 475rpx;
	}

	.addAddress .list .item picker .picker {
		width: 410rpx;
		font-size: 30rpx;
	}

	.addAddress .list .item picker .iconfont {
		font-size: 43rpx;
	}

	.addAddress .default {
		padding: 0 30rpx;
		height: 90rpx;
		background-color: #fff;
		margin-top: 23rpx;
	}

	.addAddress .default checkbox {
		margin-right: 15rpx;
	}

	.addAddress .keepBnt {
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 50rpx auto;
		font-size: 32rpx;
		color: #fff;
	}

	.addAddress .wechatAddress {
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 0 auto;
		font-size: 32rpx;
		color: var(--view-theme);
		border: 1px solid var(--view-theme);
	}

	.upload {
		display: flex;

	}

	.pictrue {
		position: relative;

	}

	.pictrue image {
		width: 100rpx;
		height: 100rpx;
	}

	.icon-guanbi1 {
		font-size: 33rpx;
		position: absolute;
		top: -10px;
		right: -10px;
	}
</style>
